Forms Style & Progess Bar
IMF Forms uses some structure from IMF Content Tabs. Pane switching for both content tabs (IMF_Content_Tabs.js) and form chevron navigation (IMF_Forms.js) is done in JavaScript.
IMF Forms requires the following: Exernal:
- jQuery 2.2.2
- Hind and Roboto Google Fonts
- Bootstrap CSS and Bootstrap JS
Internal
- Pe Icon Interface Fonts and CSS (resides in the fonts folder
- IMF_Form_Nav_Panel.html
- IMF_Alerts.css
- IMF_Buttons.css
- IMF_Forms.css
- IMF_Typography.css
- IMF_Forms.js
- Dootstrap Datepicker JS and CSS
- "pe-icon-set-interface" fonts and CSS found in the fonts folder
The progress bar can be used to show the user's progress through a process, whether it is filling out a multiple- page form, reviewing a document on eReview, or filling out an expense report on the Travel Portal.
Progress bar will show light blue on active state; light blue will also be used for hover state to indicate the ability to click; green check icon sjpi;d appear upon completion (all other icons should be removed to eliminate confusion). By indicating how much they have accomplished and how much is left, the progress bar reduces users' frustration with complex processes and even offers navigation within the process, if appropriate.
- add the class "required" to a form-group to display asterisk next to the label
- add the class "invalid" to a form-group to display to highlight the border
- To display an error message below an input add the message text within a <span class="help-block erorr">>/span> below the input
- Input placeholder text is automatically moved next to its associated label while the user is typing or if the input is not empty.
Alerts & Warnings
Modal Window
This popup overlay is a Bootstrap modal styled into a plain text popup.
Progress Bar Style
-
Step 1
Completed -
Step 2
-
Step 3
Warning -
Step 4
* required fields
-
-
-
Form Step 3 Heading